<template>
  <!-- 路由原理：
           路由是什么？
               指向
                 根据地址的不同指向不同的组件
 -->
  <div>
    <a href="#/about">about</a>
    <a href="#/home">home</a>
    <AboutView v-if="hash === '#/about'"></AboutView>
    <HomeView v-else-if="hash === '#/home'"></HomeView>
  </div>
</template>
<script>
import AboutView from '@/views/AboutView.vue'
import HomeView from '@/views/HomeView.vue'
export default {
  components: {
    AboutView,
    HomeView
  },
  data () {
    return {
      hash: '#/about'
    }
  },
  created () {
    this.hash = location.hash
    window.addEventListener('hashchange', () => {
      this.hash = location.hash
      console.log('hashchange')
    })
  }
}
</script>
<style></style>
